<template>
  <el-menu
    active-text-color="#ffd04b"
    background-color="#545c64"
    :default-active="currentPath"
    text-color="#fff"
    router
    :collapse="collapse"
  >
    <el-sub-menu index="1" v-if="loginInfo.role">
      <template #title>
        <el-icon><span class="iconfont icon-business"></span></el-icon>
        <span>商家管理</span>
      </template>
      <el-menu-item index="/businessList">
        <template #default>
          <el-icon><span class="iconfont icon-business-list"></span></el-icon>
          <span>商家列表</span>
        </template>
      </el-menu-item>
      <el-menu-item index="/shopCategory">
        <template #default>
          <el-icon><span class="iconfont icon-business-list"></span></el-icon>
          <span>店铺分类</span>
        </template>
      </el-menu-item>
      <el-menu-item index="/shopAudit">
        <template #default>
          <el-icon><span class="iconfont icon-business-list"></span></el-icon>
          <span>店铺审核</span>
        </template>
      </el-menu-item>
    </el-sub-menu>
    <el-sub-menu index="2"  v-if="!loginInfo.role">
      <template #title>
        <el-icon><span class="iconfont icon-shop"></span></el-icon>
        <span>店铺管理</span>
      </template>
      <el-menu-item index="/shopList">店铺列表</el-menu-item>
      <el-menu-item index="/foodCategory">菜品分类</el-menu-item>
      <el-menu-item index="/food" disabled>菜品列表</el-menu-item>
    </el-sub-menu>
    <el-menu-item index="3" v-if="loginInfo.role">
      <el-icon><Setting /></el-icon>
      <span>系统管理</span>
    </el-menu-item>
    <el-menu-item index="/emp" v-if="loginInfo.role">
      <el-icon><Setting /></el-icon>
      <span>员工管理</span>
    </el-menu-item>
  </el-menu>
</template>

<script>
export default {
  props:['collapse'],
  data() { 
    return {
      currentPath: "/",
      loginInfo: {}
    }
  },
  created() { 
    this.currentPath = this.$route.path;
    // 在菜单的组件中，需要从本地存储中获取登录的用户的信息，确定当前应给如何展示不同的菜单
    let info = localStorage.getItem("loginInfo");
    if (!info) {
      // 判断成立，说明当前没有登录
      this.$router.push("/businessLogin");
    }
    this.loginInfo = JSON.parse(info);
  }
};
</script>

<style scoped>
.el-menu{
  border-right: none;
}
:deep(.el-menu-vertical-demo:not(.el-menu--collapse)) {
  width: 200px;
}
</style>